<template>
    <a-card
        class="general-card"
        :title="$t('li-shi-jia-ge')"
        :header-style="{ paddingBottom: '12px' }"
    >
        <div class="flex justify-end mb-2">
            <a-select
                v-model="tableConfig.fuelId"
                style="width: 200px"
                :placeholder="$t('qing-xuan-ze-ran-liao')"
            >
                <a-option
                    v-for="item in tableConfig.fuelList"
                    :key="item.fuelId"
                    :value="item.fuelId"
                    :label="item.fuelName"
                ></a-option>
            </a-select>
            <a-button type="primary" class="ml-2" @click="search(1)">{{
                $t('search')
            }}</a-button>
        </div>
        <a-table
            :loading="tableConfig.loading"
            :columns="tableConfig.columns"
            :data="tableConfig.data"
            :pagination="tableConfig.pagination"
            @page-change="search"
        >
        </a-table>
    </a-card>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { getHistoryPriceList, getFuelList } from '../service';

    const { t } = useI18n();

    const tableConfig = reactive({
        data: [],
        loading: false,
        fuelId: '',
        fuelList: [],
        pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
        },
        columns: [
            {
                title: t('shi-jian'),
                dataIndex: 'enabledTime',
            },
            {
                title: t('ran-liao'),
                dataIndex: 'fuelName',
            },
            {
                title: t('gua-pai-jia'),
                dataIndex: 'fuelPrice',
            },
        ],
    });

    async function loadData() {
        try {
            tableConfig.loading = true;
            const payload = {
                current: tableConfig.pagination.current,
                size: tableConfig.pagination.pageSize,
                fuelId: tableConfig.fuelId,
            };
            const data: any = await getHistoryPriceList(payload);
            tableConfig.data = data.result.records;
            tableConfig.pagination.total = data.result.total;
        } finally {
            tableConfig.loading = false;
        }
    }

    const search = (pageNum: number) => {
        tableConfig.pagination.current = pageNum;
        loadData();
    };
    getFuelList().then((res) => {
        tableConfig.fuelId = res?.result?.[0]?.fuelId;
        tableConfig.fuelList = res?.result || [];
        loadData();
    });
</script>

<style lang="less" scoped></style>
